<template>
<!--  蓝色背景输入框-->
<!--  @change="oninput"-->
  <el-input style="width: 100%; margin-bottom: 20px" v-model="inputData" v-on:input="oninput"  :placeholder="props.placeholder" @clear="childMethod" clearable  @keyup.enter="childMethod">
    <template #append>
      <el-button style="background-color: #169bd5; border-radius: inherit; color: #ffffff" @click="childMethod()" :icon="Search" />
    </template>
  </el-input>
</template>

<script setup lang="ts" >
import { Search } from "@element-plus/icons-vue";
import {defineEmits, ref} from "vue";
const emit = defineEmits(["update:modelValue","fatherMethod"])
let inputData:any = ref("")
let props = defineProps({
  placeholder: String // 属性名: 其对应的数据类型
});
//输入双向绑定
const oninput=()=>{
  emit("update:modelValue", inputData.value)
}
//调用父组件刷新
const childMethod = () => {
  emit("update:modelValue", inputData.value)
  emit("fatherMethod")
};
</script>

<style scoped>

</style>
